import React, { PropTypes, Component } from 'react';//引入react包，用于编写react组件
import { Row, Col,Spin } from 'antd';//引入蚂蚁金服的antUI组件中的row和col（栅格），管理布局
import ECharts from 'echarts-for-react';//引入react-echarts包，实现echarts实现


//设置全局变量
var optionDatas = {};
class ReactEcharts extends React.Component {
    constructor(props) {
        super(props);
        //初始化修改状态属性
        this.state = {
            
        }
    }
    /*生命周期函数--->该方法在完成首次渲染之前被调用-》调用action中ajax方法，获取数据*/
    componentWillMount() {
    }

    /**
     *条件：当组件确定要更新，在 render 之前调用
     *用处：这个时候可以确定一定会更新组件，可以执行更新前的操作
     *注意：方法中不能使用 setState ，setState 的操作应该在 componentWillReceiveProps 方法中调用
     * @param nextProps
     * @param nextState
     */
    componentWillUpdate(nextProps, nextState) {

    }
    render() {
        if(this.props.showChart){
            return (<div style={{textAlign:'center', height: 460}}><Spin style={{marginTop:'15%'}}/></div>);
        }
        var seriesData = [];
        const ydata=this.props.charsData;
        const xdata=this.props.xDatas;
        var i = 0;
        ydata.map((item) => {
            seriesData.push({
                name: item.name,
                type: 'line',
                data: item.value,
                yAxisIndex: i,
                animation: false,
                lineStyle: {
                    width: 1
                },
            });
            ++i;
        });
        //echarts中获取数据的option设置
        const optionDatas = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    animation: false,
                    label: {
                        backgroundColor: '#505765'
                    }
                }
            },

            legend: {
                data: this.props.legendData,//Tag名称
            },
            //布局设置，类似于margin
            grid: {
                bottom: 30,
                containLabel: true,
            },
            //X轴数据设置dateArray
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: { onZero: false },
                    data: xdata
                }
            ],
            yAxis: function () {
                var yAxisData = [];
                var i=0;
                var count=ydata.length;
                var avg=count/2;
                var offset=-50;
                var position='left';
                ydata.map((item) => {
                    if(i==avg){
                        offset=-50;
                        position='right';
                    }
                    offset+=50;
                    yAxisData.push({
                        name: item.name,
                        type: 'value',
                        max: parseInt(item.highAxis),
                        min: parseInt(item.lowAxis),
                        position: position,
                        offset:offset
                    });
                    i++;
                });
                console.log(yAxisData);
                return yAxisData;
            }(),
            //折线图图标和线条设置以及Y轴数据设置rateArray
            series: seriesData
        };
        return (
            <div>
                <Row>
                    <Col span={24} className="ehcharts">
                        <ECharts option={optionDatas} showLoading={this.props.showChart} style={{height:460}}/>
                    </Col>
                </Row>
            </div>
        );
    }

}

//定义组件默认的属性值(如果父组见没有传递数据，使用默认数据)
ReactEcharts.defaultProps = {};
//校验从父组件传递的属性值是否符合
ReactEcharts.propTypes = {};
//将ReactEcharts组建开放，其他组件只要在文件开始引入改组件即可引用
export default ReactEcharts;
